/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  background-color: #1a1a1a;
  color: #e0e0e0;
  line-height: 1.6;
}

/* App layout */
.app {
  height: 100vh; /* Fixed viewport height */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent page scrolling */
}

.header {
  background: #242424;
  border-bottom: 1px solid #404040;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  display: inline;
}

.header p {
  margin: 0 0 0 1rem;
  color: #a0a0a0;
  font-size: 0.875rem;
  display: inline;
}

.main-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 2fr; /* MCP servers: 1/3, Chat: 2/3 */
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  min-width: 0; /* Allow grid items to shrink below their content size */
  height: calc(
    100vh - 100px
  ); /* Fixed height to fit viewport with tighter header */
  overflow: hidden; /* Prevent any overflow */
}

/* MCP Servers Section */
.mcp-section {
  background: #242424;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid #404040;
  height: 100%; /* Take full height of grid cell */
  overflow-y: auto; /* Allow scrolling if content is too tall */
  display: flex;
  flex-direction: column;
}

.mcp-section h2 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

.add-server-form {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #404040;
}

.form-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.form-group input {
  flex: 1;
  min-width: 0; /* Allow input to shrink */
  padding: 0.5rem;
  border: 1px solid #404040;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
  background: #1a1a1a;
  color: #e0e0e0;
}

.form-group input:focus {
  outline: none;
  border-color: #f38020;
  box-shadow: 0 0 0 3px rgba(243, 128, 32, 0.2);
}

.form-group button {
  padding: 0.5rem 1rem;
  background: #f38020;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap; /* Prevent button text from wrapping */
  flex-shrink: 0; /* Prevent button from shrinking */
}

.form-group button:hover:not(:disabled) {
  background: #e06a00;
}

.form-group button:disabled {
  background: #606060;
  cursor: not-allowed;
}

/* Server List */
.server-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1; /* Take remaining space */
  overflow-y: auto; /* Allow scrolling if too many servers */
}

.server-card {
  border: 1px solid #404040;
  border-radius: 6px;
  padding: 0.75rem;
  background: #1a1a1a;
}

.server-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.server-info h3 {
  margin: 0 0 0.25rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

.server-url {
  margin: 0;
  font-size: 0.75rem;
  color: #a0a0a0;
  font-family: "Monaco", "Menlo", monospace;
  word-break: break-all; /* Break long URLs */
}

.server-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.remove-btn {
  padding: 0.25rem 0.5rem;
  background: #404040;
  color: #a0a0a0;
  border: 1px solid #606060;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.remove-btn:hover {
  background: #606060;
  color: #e0e0e0;
  border-color: #808080;
}

.server-tools {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #404040;
}

.server-tools h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #e0e0e0;
}

.tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tool-tag {
  background: #404040;
  color: #f38020;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Chat Section */
.chat-section {
  background: #242424;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid #404040;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Allow the section to shrink */
  overflow: hidden; /* Prevent content from overflowing */
  height: 100%; /* Take full height of grid cell */
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chat-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

.reset-btn {
  padding: 0.375rem 0.75rem;
  background: #404040;
  color: #a0a0a0;
  border: 1px solid #606060;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-btn:hover:not(:disabled) {
  background: #606060;
  color: #e0e0e0;
  border-color: #808080;
}

.reset-btn:disabled {
  background: #2a2a2a;
  color: #606060;
  border-color: #404040;
  cursor: not-allowed;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow flex item to shrink */
  overflow: hidden; /* Prevent overflow */
}

.messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal overflow */
  padding: 0.75rem;
  background: #1a1a1a;
  border-radius: 6px;
  border: 1px solid #404040;
  margin-bottom: 0.75rem;
  min-width: 0; /* Allow the messages container to shrink */
  display: flex;
  flex-direction: column;
}

.message {
  margin-bottom: 0.75rem;
}

.message:last-child {
  margin-bottom: 0;
}

.message.user {
  text-align: left; /* Keep left alignment for full-width messages */
}

.message.assistant {
  text-align: left;
}

.message-content {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word; /* Break long words */
  word-break: break-word; /* Break long words */
  box-sizing: border-box; /* Include padding in width calculation */
}

.message.user .message-content {
  background: #f38020;
  color: white;
}

.message.assistant .message-content {
  background: #242424;
  color: #e0e0e0;
  border: 1px solid #404040;
}

.chat-input {
  display: flex;
  gap: 0.5rem;
}

.chat-input input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #404040;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
  background: #1a1a1a;
  color: #e0e0e0;
}

.chat-input input:focus {
  outline: none;
  border-color: #f38020;
  box-shadow: 0 0 0 3px rgba(243, 128, 32, 0.2);
}

.chat-input button {
  padding: 0.5rem 1rem;
  background: #f38020;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chat-input button:hover:not(:disabled) {
  background: #e06a00;
}

.chat-input button:disabled {
  background: #606060;
  cursor: not-allowed;
}

/* Message Part Blocks */
.part-block {
  margin: 0.25rem 0;
  border-radius: 6px;
  border: 1px solid #404040;
  background: #1a1a1a;
  overflow: hidden;
}

.part-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: #404040;
  border-bottom: 1px solid #606060;
  font-weight: 500;
  font-size: 0.75rem;
}

.part-icon {
  font-size: 0.875rem;
}

.part-title {
  flex: 1;
  color: #e0e0e0;
}

.part-content {
  padding: 0.75rem;
  background: #242424;
}

/* Reasoning Block */
.reasoning-block {
  border-left: 4px solid #f38020;
}

.reasoning-block .part-header {
  background: #404040;
  color: #f38020;
}

/* File Block */
.file-block {
  border-left: 4px solid #f38020;
}

.file-block .part-header {
  background: #404040;
  color: #f38020;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.file-type {
  background: #404040;
  color: #f38020;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.file-link {
  color: #f38020;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.file-link:hover {
  text-decoration: underline;
}

/* Tool Block */
.tool-block {
  border-left: 4px solid #f38020;
}

.tool-block .part-header {
  background: #404040;
  color: #f38020;
}

.tool-state {
  background: #606060;
  color: #f38020;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.tool-state.input-streaming {
  background: #606060;
  color: #f38020;
}

.tool-state.input-available {
  background: #404040;
  color: #f38020;
}

.tool-state.output-available {
  background: #404040;
  color: #f38020;
}

.tool-state.output-error {
  background: #606060;
  color: #ff6b6b;
}

.tool-section {
  margin: 0.75rem 0;
}

.tool-section:first-child {
  margin-top: 0;
}

.tool-section:last-child {
  margin-bottom: 0;
}

.tool-section-title {
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.tool-section.error .tool-section-title {
  color: #ff6b6b;
}

.tool-data {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: #e0e0e0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%; /* Ensure data doesn't overflow */
}

.tool-data-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Code Output Styling */
.code-output {
  border: 1px solid #404040;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
  color: #e0e0e0;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #404040;
  border-bottom: 1px solid #606060;
}

.code-language {
  font-size: 0.75rem;
  font-weight: 600;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.copy-button {
  background: #606060;
  border: 1px solid #808080;
  color: #e0e0e0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.copy-button:hover {
  background: #808080;
  border-color: #a0a0a0;
}

.code-content {
  margin: 0;
  padding: 1rem;
  background: #1a1a1a;
  color: #e0e0e0;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%; /* Ensure code doesn't overflow */
}

.code-content code {
  background: none;
  padding: 0;
  border: none;
  color: #e0e0e0;
  font-family: inherit;
  font-size: inherit;
}

/* Syntax highlighting for JavaScript */
.code-content code {
  color: #e0e0e0;
}

/* Result Output Styling */
.result-output {
  border: 1px solid #404040;
  border-radius: 6px;
  overflow: hidden;
}

.result-header {
  padding: 0.5rem 0.75rem;
  background: #404040;
  border-bottom: 1px solid #606060;
  font-size: 0.75rem;
  font-weight: 600;
  color: #e0e0e0;
}

.result-data {
  margin: 0;
  padding: 0.75rem;
  background: #1a1a1a;
  color: #e0e0e0;
  font-size: 0.75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Error data styling */
.tool-data.error-data {
  background: #2a1a1a;
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* Input Description Styling */
.input-description {
  border: 1px solid #404040;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
  margin-bottom: 0.75rem;
}

.input-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #404040;
  border-bottom: 1px solid #606060;
  font-weight: 500;
  font-size: 0.875rem;
}

.input-icon {
  font-size: 1rem;
}

.input-title {
  color: #e0e0e0;
  font-weight: 600;
}

.input-content {
  padding: 1rem;
  background: #242424;
  color: #e0e0e0;
  line-height: 1.6;
  font-size: 0.875rem;
}

.input-raw {
  border: 1px solid #404040;
  border-radius: 6px;
  overflow: hidden;
}

.input-raw-header {
  padding: 0.5rem 0.75rem;
  background: #404040;
  border-bottom: 1px solid #606060;
  font-size: 0.75rem;
  font-weight: 600;
  color: #a0a0a0;
}

/* Unknown Block */
.unknown-block {
  border-left: 4px solid #6b7280;
}

.unknown-block .part-header {
  background: #f9fafb;
  color: #374151;
}

.part-data {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: #374151;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Responsive design */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }

  .form-group {
    flex-direction: column;
    align-items: stretch;
  }

  .server-header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .server-actions {
    align-self: flex-end;
  }

  .part-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .file-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .message-content {
    width: 100%; /* Full width on mobile too */
  }
}

/* Additional responsive breakpoint for very small screens */
@media (max-width: 480px) {
  .main-content {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .chat-section,
  .mcp-section {
    padding: 1rem;
  }

  .message-content {
    width: 100%;
    padding: 0.5rem 0.75rem;
  }

  .code-content {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
}
